
$ (function () {
  var tables = [data2, data3, data4, data5];

  var camera, scene, renderer;
  var controls;
  var rotation;

  var objects = [];
  var targets = [];

  var playing = false;

  init ();
  animate ();

  function init () {
    camera = new THREE.PerspectiveCamera (
      40,
      window.innerWidth / window.innerHeight,
      1,
      10000
    );
    camera.position.z = 2600;

    scene = new THREE.Scene ();

    for (var i = 0; i < getTableMax (); i++) {
      var element = document.createElement ('div');
      element.className = 'element';

      var img = document.createElement ('img');
      element.appendChild (img);

      var ava = getAvatar (i);
      if (ava != '') {
        img.src = ava;
        element.style.display = 'block';
      } else {
        element.style.display = 'none';
      }

      var object = new THREE.CSS3DObject (element);
      object.position.x = Math.random () * 4000 - 2000;
      object.position.y = Math.random () * 4000 - 2000;
      object.position.z = Math.random () * 4000 - 2000;

      objects.push (object);

      scene.add (object);

      // 表格需要坐标进行排序的
      var object = new THREE.Object3D ();
      targets.push (object);
    }

    //渲染
    renderer = new THREE.CSS3DRenderer ();
    renderer.setSize (window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    document.getElementById ('container').appendChild (renderer.domElement);

    window.addEventListener ('resize', onWindowResize, false);

    $ ('body').keyup (function (event) {
      switch (event.keyCode) {
        case 13:
          hideqr ();
          start ();
          return false;
        case 65:
          toggleqr ();
          return false;
        default:
          break;
      }
    });
  }

  function start () {
    if (playing) {
      return;
    }

    playing = true;

    //自动开始
    transform (0, 200);

    // 自动更换
    var ini = 0;
    setInterval (function () {
      ini++;
      if (ini < tables.length) {
        if (ini == 3) {
          document.getElementById ('bgvideo1').style.display = 'none';
          document.getElementById ('bgvideo1').pause ();
          document.getElementById ('bgvideo2').style.display = 'block';
          document.getElementById ('bgvideo2').play ();
          document.getElementById ('screen').style.display = 'block';
        }
        transform (ini, 200);
      }
    }, 3000);
  }

  function transform (index, duration) {
    var table = tables[index];
    var targetsIn = [];
    var targetsOut = [];

    for (var i = 0; i < objects.length; i++) {
      var targetIn = new THREE.Object3D ();
      var targetOut = new THREE.Object3D ();

      if (table.length > i) {
        var item = table[i];
        var ava = getAvatar (i);
        var src = item.near && item.len > 1200 && ava != '' ? ava : item.src;
        objects[i].element.style.display = item.empty ? 'none' : 'block';
        objects[i].element.firstChild.src = src;

        targetIn.position.x = item.x * 80 - 1530;
        targetIn.position.y = -(item.y * 80) + 990;

        targetOut.position.x = Math.random () * 4000 - 2000;
        targetOut.position.y = Math.random () * 4000 - 2000;
      } else {
        objects[i].element.style.display = 'none';

        targetIn.position.x = 0;
        targetIn.position.y = 0;

        targetOut.position.x = 0;
        targetOut.position.y = 0;
      }

      targetsIn.push (targetIn);
      targetsOut.push (targetOut);
    }

    update (targetsOut, duration);
    setTimeout (() => {
      update (targetsIn, duration);
    }, 1000);
  }

  function update (targets, duration) {
    TWEEN.removeAll ();

    for (var i = 0; i < objects.length; i++) {
      var object = objects[i];
      var target = targets[i];

      new TWEEN.Tween (object.position)
        .to (
          {
            x: target.position.x,
            y: target.position.y,
            z: target.position.z,
          },
          Math.random () * duration + duration
        )
        .easing (TWEEN.Easing.Exponential.InOut)
        .start ();

      new TWEEN.Tween (object.rotation)
        .to (
          {
            x: target.rotation.x,
            y: target.rotation.y,
            z: target.rotation.z,
          },
          Math.random () * duration + duration
        )
        .easing (TWEEN.Easing.Exponential.InOut)
        .start ();
    }

    new TWEEN.Tween (this).to ({}, duration * 2).onUpdate (render).start ();
  }

  function animate () {
    if (scene.rotation.y > 0.4) {
      rotation = 1;
    } else if (scene.rotation.y < -0.4) {
      rotation = 0;
    }

    if (rotation == 1) {
      scene.rotation.y -= 0.008;
    } else {
      scene.rotation.y += 0.008;
    }

    // 让场景通过x轴或者y轴旋转  & z
    requestAnimationFrame (animate);

    TWEEN.update ();

    // 渲染循环
    render ();
  }

  function render () {
    renderer.render (scene, camera);
  }

  function onWindowResize () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix ();

    renderer.setSize (window.innerWidth, window.innerHeight);

    render ();
  }

  function toggleqr () {
    $ ('#bgqr').toggle ();
  }

  function hideqr () {
    $ ('#bgqr').hide ();
  }

  function getTableMax () {
    var max = 0;
    for (var i = 0; i < tables.length; i++) {
      var len = tables[i].length;
      max = len > max ? len : max;
    }
    return max;
  }

  function getAvatar (index) {
    if (avatar_names.length > index) {
      return avatar_path + avatar_names[index];
    }

    return '';
  }
});